<style lang="less">
.user-admin {
	min-height: 100%;
	background: #fff;
	box-sizing: border-box;
	padding: 24px 24px 48px;
	position: relative;

	&__number {
		color: #59595e;
	}

	&__operation {
		height: 32px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;

		.operation__tip {
			color: #bfbfbf;
			font-size: 14px;
			margin-left: 16px;
		}
	}

	&__table {
		.arco-table-tr {
			.arco-table-td {
				&:nth-last-of-type(1) {
					.arco-table-cell {
						color: #386cff;
					}
				}
			}
		}

		.table__operation {
			cursor: pointer;

			&+.table__operation {
				margin-left: 16px;
			}
		}
	}

	&__pagination {
		border-top: 1px solid #f1f1f1;
		height: 48px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding: 0 24px;
	}
}
</style>

<template>
	<div class="user-admin">
		<div class="user-admin__operation">
			<div class="operation__left">
				<a-button type="primary" @click="changeAddUserDrawerVisible(true)">新增用户</a-button>
				<span class="operation__tip">
					（默认显示最近300条数据，全部数据共<span class="user-admin__number">{{
						tableTotal
					}}</span>条）
				</span>
			</div>
			<div class="operation__right">
				<a-input-search v-model="searchText" :style="{ width: '243px' }" placeholder="搜索手机号/用户ID/用户名"
					@search="onSearchClick" />
			</div>
		</div>
		<a-table class="design__table user-admin__table" :columns="userAdmin" :data="userAdminData" :pagination="false">
			<template #createTime="{ record }">
				{{ record.createTime ? dateFormat(record.createTime) : "" }}
			</template>
			<template #dueDate="{ record }">
				{{ record.dueDate ? dateFormat(record.dueDate) : "--" }}
			</template>
			<template #userPayType="{ record }">
				{{ memberTypeMaps[record.userPayType] }}
			</template>
			<template #operation="{ record }">
				<span class="table__operation" @click="showDetails(record.id)">详情</span>
				<span class="table__operation" @click="changeAuthDrawerVisible(true, record)">授权</span>
			</template>
		</a-table>
		<div class="user-admin__pagination">
			<a-pagination :total="tableTotal" v-model:current="current" @change="getUserAdminList" />
		</div>
		<details-drawer 
			:visible="detailsDrawerVisible"
			:user-id="detailsUserId"
			@changeDetailsDrawerVisible="changeDetailsDrawerVisible"
			@auth="changeAuthDrawerVisible(true, $event)"
			@close="closeDrawer"
		/>
		<auth-drawer
			:visible="authDrawerVisible"
			:auth-data="authData"
			@changeAuthDrawerVisible="changeAuthDrawerVisible"
			@refreshList="getUserAdminList"
		/>
		<add-user-drawer
			:visible="addUserDrawerVisible"
			@changeAddUserDrawerVisible="changeAddUserDrawerVisible"
			@refreshList="getUserAdminList"
		/>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { user } from "@/api";
import dateFormat from "ourwill-feutil/common/dateFormat";
import detailsDrawer from "@/components/userDetailsDrawer.vue";
import waitUntil from "ourwill-feutil/common/waitUntil";
import authDrawer from "@/components/authDrawer.vue";
import addUserDrawer from "./components/addUserDrawer.vue";
import { useUserStore } from "@/store";

const userState = useUserStore();

const memberTypeMaps: any = {
	0: "免费",
	1: "高级",
	2: "旗舰"
};
const tableTotal = ref<number>(0);
const current = ref<number>(1);
const userAdmin: any = [
	{
		title: "注册时间",
		dataIndex: "createTime",
		slotName: "createTime",
	},
	{
		title: "昵称",
		dataIndex: "nickname",
	},
	{
		title: "手机号",
		dataIndex: "mobPhone",
	},
	{
		title: "用户名",
		dataIndex: "username",
	},
	{
		title: "用户ID",
		dataIndex: "id",
	},
	{
		title: "会员版本",
		dataIndex: "userPayType",
		slotName: "userPayType",
	},
	{
		title: "会员到期时间",
		dataIndex: "dueDate",
		slotName: "dueDate",
	},
	{
		title: "操作",
		slotName: "operation",
	},
];
const userAdminData = ref([]);

const detailsDrawerVisible = ref(false);
const changeDetailsDrawerVisible = (v: boolean) => {
	detailsDrawerVisible.value = v;
};
const authDrawerVisible = ref(false);
const authData = ref<object>();
const changeAuthDrawerVisible = (v: boolean, nowAuthData?: object) => {
	authDrawerVisible.value = v;
	if (nowAuthData) {
		authData.value = nowAuthData;
	}
};
const addUserDrawerVisible = ref(false);
const changeAddUserDrawerVisible = (v: boolean) => {
	addUserDrawerVisible.value = v;
};
const detailsUserId: any = ref();
const showDetails = (userId: number) => {
	detailsUserId.value = userId;
	changeDetailsDrawerVisible(true);
}


const searchText = ref<number | string>("");
const onSearchClick = () => {
	current.value = 1
	getUserAdminList()
}
const getUserAdminList = async () => {
	const params = {
		searchText: searchText.value,
		pageNum: current.value,
		pageSize: 10,
	};
	const { ok, data } = await user.getUserAdminList(params);
	if (!ok) return;

	userAdminData.value = data.data.records;
	tableTotal.value = data.data.total;
};

const closeDrawer = () => {
	detailsDrawerVisible.value = false;
}
onMounted(() => {
	waitUntil(
		() => {
			return userState.userInfo.id;
		},
		() => {
			getUserAdminList();
		}
	)
});
</script>
